<template>
  <div class="container">
    <div class="header">
      <h1>积分设置</h1>
    </div>
    
    <el-card class="setting-card" v-loading="loading">
      <div class="setting-description">
        <el-alert
          type="info"
          :closable="false"
          show-icon
        >
          <div class="description-content">
            <p>在此页面设置用户可获得积分的规则，这些规则会对所有用户生效。</p>
            <p>用户积分可用于兑换商品、参与活动等功能，合理设置积分规则有助于提高用户活跃度。</p>
          </div>
        </el-alert>
      </div>
      
      <el-form :model="form" ref="formRef" label-width="160px" class="setting-form">
        <el-divider content-position="left">签到积分设置</el-divider>
        
        <el-form-item label="每日签到积分">
          <el-input-number v-model="form.dailyCheckInPoints" :min="0" :max="1000" placeholder="每日签到可获得的积分数"></el-input-number>
          <span class="form-tip">用户每日签到可获得的基础积分</span>
        </el-form-item>
        
        <el-form-item label="连续签到额外奖励">
          <el-switch v-model="form.enableContinuousCheckIn" />
          <span class="form-tip">启用后，用户连续签到将获得额外奖励</span>
        </el-form-item>
        
        <template v-if="form.enableContinuousCheckIn">
          <el-form-item label="连续签到7天奖励">
            <el-input-number v-model="form.sevenDaysPoints" :min="0" :max="1000"></el-input-number>
            <span class="form-tip">连续签到7天可获得的额外奖励积分</span>
          </el-form-item>
          
          <el-form-item label="连续签到30天奖励">
            <el-input-number v-model="form.thirtyDaysPoints" :min="0" :max="5000"></el-input-number>
            <span class="form-tip">连续签到30天可获得的额外奖励积分</span>
          </el-form-item>
        </template>
        
        <el-divider content-position="left">社交积分设置</el-divider>
        
        <el-form-item label="邀请好友注册奖励">
          <el-input-number v-model="form.inviteFriendPoints" :min="0" :max="1000"></el-input-number>
          <span class="form-tip">成功邀请一位好友注册可获得的积分奖励</span>
        </el-form-item>
        
        <el-form-item label="好友购买商品奖励比例">
          <el-input-number v-model="form.friendPurchasePercent" :min="0" :max="100" :precision="1"></el-input-number>
          <span class="form-tip">好友购买商品后邀请人可获得的积分比例（订单金额的百分比）</span>
        </el-form-item>
        
        <el-divider content-position="left">活动积分设置</el-divider>
        
        <el-form-item label="观看课程视频">
          <el-input-number v-model="form.watchCoursePoints" :min="0" :max="100"></el-input-number>
          <span class="form-tip">完成一节课程视频学习可获得的积分</span>
        </el-form-item>
        
        <el-form-item label="完成课程测试">
          <el-input-number v-model="form.courseTestPoints" :min="0" :max="500"></el-input-number>
          <span class="form-tip">完成一次课程测试可获得的积分</span>
        </el-form-item>
        
        <el-form-item label="评价商品/课程">
          <el-input-number v-model="form.reviewPoints" :min="0" :max="200"></el-input-number>
          <span class="form-tip">发表有效评价可获得的积分</span>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveSettings" :loading="saving">保存设置</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getPointsSettings, updatePointsSettings } from '@/api/points'

const formRef = ref(null)
const loading = ref(false)
const saving = ref(false)

// 表单数据
const form = reactive({
  dailyCheckInPoints: 5,
  enableContinuousCheckIn: true,
  sevenDaysPoints: 20,
  thirtyDaysPoints: 100,
  inviteFriendPoints: 50,
  friendPurchasePercent: 5.0,
  watchCoursePoints: 2,
  courseTestPoints: 10,
  reviewPoints: 5
})

// 初始化表单默认值
const defaultForm = { ...form }

// 从后端列表格式转换为前端表单格式
const convertSettingsListToForm = (settingsList) => {
  if (!Array.isArray(settingsList) || settingsList.length === 0) {
    return null
  }
  
  const formData = { ...defaultForm }
  
  settingsList.forEach(setting => {
    switch (setting.settingKey) {
      case 'dailyCheckInPoints':
        formData.dailyCheckInPoints = parseInt(setting.settingValue) || 0
        break
      case 'enableContinuousCheckIn':
        formData.enableContinuousCheckIn = setting.settingValue === '1'
        break
      case 'sevenDaysPoints':
        formData.sevenDaysPoints = parseInt(setting.settingValue) || 0
        break
      case 'thirtyDaysPoints':
        formData.thirtyDaysPoints = parseInt(setting.settingValue) || 0
        break
      case 'inviteFriendPoints':
        formData.inviteFriendPoints = parseInt(setting.settingValue) || 0
        break
      case 'friendPurchasePercent':
        formData.friendPurchasePercent = parseFloat(setting.settingValue) || 0
        break
      case 'watchCoursePoints':
        formData.watchCoursePoints = parseInt(setting.settingValue) || 0
        break
      case 'courseTestPoints':
        formData.courseTestPoints = parseInt(setting.settingValue) || 0
        break
      case 'reviewPoints':
        formData.reviewPoints = parseInt(setting.settingValue) || 0
        break
    }
  })
  
  return formData
}

// 获取积分设置
const fetchPointsSettings = async () => {
  loading.value = true
  try {
    const response = await getPointsSettings()
    if (response.code === 200 && response.data) {
      // 转换后端列表格式为前端表单格式
      const formData = convertSettingsListToForm(response.data)
      if (formData) {
        Object.assign(form, formData)
      }
    }
  } catch (error) {
    console.error('获取积分设置失败', error)
    ElMessage.error('获取积分设置失败，显示默认值')
  } finally {
    loading.value = false
  }
}

// 保存积分设置
const saveSettings = async () => {
  saving.value = true
  try {
    const response = await updatePointsSettings(form)
    if (response.code === 200) {
      ElMessage.success('积分设置保存成功')
    } else {
      ElMessage.error(response.message || '保存失败')
    }
  } catch (error) {
    console.error('保存积分设置失败', error)
    ElMessage.error('保存积分设置失败')
  } finally {
    saving.value = false
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(form, defaultForm)
}

onMounted(() => {
  fetchPointsSettings()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  
  .header {
    margin-bottom: 20px;
    
    h1 {
      font-size: 24px;
      margin: 0;
    }
  }
  
  .setting-card {
    margin-bottom: 20px;
  }
  
  .setting-description {
    margin-bottom: 20px;
    
    .description-content {
      p {
        margin: 5px 0;
      }
    }
  }
  
  .setting-form {
    max-width: 800px;
  }
  
  .form-tip {
    margin-left: 10px;
    color: #909399;
    font-size: 13px;
  }
  
  .el-divider {
    margin: 20px 0;
    
    .el-divider__text {
      font-weight: bold;
      color: #409eff;
    }
  }
}
</style> 